---
title: "Justify Self"
# description: "Utilities for controlling how an individual grid item is aligned along its inline axis."
description: "用于控制单个网格项如何沿其内联轴对齐的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/justifySelf'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Auto

<!-- Use `justify-self-auto` to align an item based on the value of the grid's `justify-items` property: -->
使用 `justify-self-auto` 根据网格的 `justify-items` 属性的值来对齐一个项目：

```html purple
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-stretch auto-rows-fr h-32">
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-purple-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="justify-self-auto text-white text-2xl font-extrabold bg-purple-500 rounded-md flex justify-center items-center px-4 py-2">1</div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-purple-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-purple-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-purple-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-purple-500 rounded-md flex justify-center items-center px-4 py-2"></div>
  </div>
</template>

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="**justify-self-auto** ...">1</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```

## Start

<!-- Use `justify-self-start` to align a grid item to the start its inline axis: -->
使用 `justify-self-start` 将网格项沿内联轴起点对齐：

```html emerald
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-stretch auto-rows-fr h-32">
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-emerald-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="justify-self-start text-white text-2xl font-extrabold bg-emerald-500 rounded-md flex justify-center items-center px-4 py-2">1</div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-emerald-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-emerald-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-emerald-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-emerald-500 rounded-md flex justify-center items-center px-4 py-2"></div>
  </div>
</template>

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="**justify-self-start** ...">1</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```

## Center

<!-- Use `justify-self-center` to align a grid item along the center its inline axis: -->
使用 `justify-self-center` 将网络项沿其内联轴的中心对齐。

```html amber
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-stretch auto-rows-fr h-32">
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-amber-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="justify-self-center text-white text-2xl font-extrabold bg-amber-500 rounded-md flex justify-center items-center px-4 py-2">1</div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-amber-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-amber-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-amber-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-amber-500 rounded-md flex justify-center items-center px-4 py-2"></div>
  </div>
</template>

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="**justify-self-center** ...">1</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```

## End

<!-- Use `justify-self-end` to align a grid item to the end its inline axis: -->
使用 `justify-self-end` 将网格项沿内联轴终点对齐：

```html rose
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-stretch auto-rows-fr h-32">
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-rose-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="justify-self-end text-white text-2xl font-extrabold bg-rose-500 rounded-md flex justify-center items-center px-4 py-2">1</div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-rose-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-rose-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-rose-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-rose-500 rounded-md flex justify-center items-center px-4 py-2"></div>
  </div>
</template>

<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="**justify-self-end** ...">1</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```

## Stretch

<!-- Use `justify-self-stretch` to stretch a grid item to fill the grid area on its inline axis: -->
使用 `justify-self-stretch` 来拉伸一个网格项，以填充其内联轴上的网格区域。

```html fuchsia
<template preview class="p-4">
  <div class="grid grid-cols-3 gap-4 justify-items-start auto-rows-fr h-32">
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-fuchsia-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="justify-self-stretch text-white text-2xl font-extrabold bg-fuchsia-500 rounded-md flex justify-center items-center px-4 py-2">1</div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-fuchsia-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-fuchsia-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-fuchsia-500 rounded-md flex justify-center items-center px-4 py-2"></div>
    <div class="text-white text-2xl font-extrabold bg-stripes bg-stripes-fuchsia-500 rounded-md flex justify-center items-center px-4 py-2"></div>
  </div>
</template>

<div class="grid justify-items-start ...">
  <!-- ... -->
  <div class="**justify-self-stretch** ...">1</div>
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
  <!-- ... -->
</div>
```

## 响应式

<!-- To control the alignment of a grid item inside its grid area at a specific breakpoint, add a `{screen}:` prefix to any existing utility class. For example, use `md:justify-self-end` to apply the `justify-self-end` utility at only medium screen sizes and above. -->
要在特定的断点处控制网格项在其网格区域内的对齐，可以在任何现有的功能类前添加 `{screen}:` 前缀。例如，使用 `md:justify-self-end` 来仅在中等尺寸及以上的屏幕应用 `justify-self-end` 功能。

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="justifySelf" name="justify-self" />

### 禁用

<Disabling plugin="justifySelf" name="justify-self" />
